import { useState, useMemo } from 'react';
import { InbizIcon } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';
import CategoryItem from './CategoryItem'
import './index.less'
import type { ICategorySelect, IConfigItem } from '../content';
import type { ISearchData } from '../../../../designer/service';

type ICategoryLeft = IConfigItem & {
  list: ISearchData['SectionList'];
  selected: string[];
  onSelected: ICategorySelect;
};
function CategoryTop({ list, config, selected, onSelected, engineProps }: ICategoryLeft) {
  const [showMore, $showMore] = useState(false);
  const topshowList = useMemo(() => {
    return list.map((item, index) => {
      if (item.ShowHierarchy == 1 && item.IsGroup) {
        return item.SectionGroupData.map((ele, i) => {
          return <CategoryItem
            key={ele.Value}
            item={ele}
            selected={selected}
            onSelected={onSelected}
            show={index < config.sectionNumber ? true : showMore}
            IsWhether={item.IsWhether}
            level={index}
            config={config}
            parentItem={item}
            showCustomValue={item.SectionGroupData.length - 1 == i}
            designer={engineProps.inbiz.browser.designer}
          />
        })
      }
      return (
        <CategoryItem
          key={item.Value}
          item={item}
          selected={selected}
          onSelected={onSelected}
          show={index < config.sectionNumber ? true : showMore}
          IsWhether={item.IsWhether}
          level={index}
          config={config}
          parentItem={item}
          showCustomValue= {item.IsCustomSearch}
          designer = {engineProps.inbiz.browser.designer}
        />
      );
    }).flat()
  }, [config.sectionNumber, list, showMore]);
  
  return (
    <div className="categoryTop">
      {showMore?topshowList : topshowList.slice(0, config.sectionNumber)}
      {topshowList.length > config.sectionNumber && (
        <div className="throughBox">
          <a onClick={() => $showMore(!showMore)}>
            <InbizIcon type="icon-ic-gengduoshaixuan" />{' '}
            <TextWidget>
              {!showMore
                ? 'SearchResultEngine.moreFilters'
                : 'SearchResultEngine.putAway'}
            </TextWidget>
          </a>
        </div>
      )}
    </div>
  );
}

export default CategoryTop;

